<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .canvas {
        border: 1px solid gray;
      }
    </style>
  </head>
  <body>
    <canvas class="canvas" width="500" height="500"></canvas>

    <script type="module">
      import initShader from "./utils/initShader.js";
      import vertex from "./shader/13/vertex.glsl?raw";
      import fragment from "./shader/13/fragment.glsl?raw";
      // 获取canvas
      const canvas = document.querySelector(".canvas");
      // 获取webgl上下文
      const gl = canvas.getContext("webgl");
      // 初始化着色器程序对象
      const program = initShader(gl, vertex, fragment);

      /*
       * 顶点数据
       * 数据结构：x, y, z
       [
        // 前面四个点
        -0.5,-0.5,0.5,
        0.5,-0.5,0.5,
        0.5,0.5,0.5,
        -0.5,0.5,0.5,
        // 后面四个点
        -0.5,-0.5,-0.5,
        -0.5,0.5,-0.5,
        0.5,0.5,-0.5,
        0.5,-0.5,-0.5,
        // 上面四个点
        -0.5,0.5,-0.5,
        -0.5,0.5,0.5,
        0.5,0.5,0.5,
        0.5,0.5,-0.5,
        // 下面四个点
        -0.5,-0.5,-0.5,
        0.5,-0.5,-0.5,
        0.5,-0.5,0.5,
        -0.5,-0.5,0.5,
        // 右面四个点
        0.5,-0.5,-0.5,
        0.5,0.5,-0.5,
        0.5,0.5,0.5,
        0.5,-0.5,0.5,
        // 左面四个点
        -0.5,-0.5,-0.5,
        -0.5,-0.5,0.5,
        -0.5,0.5,0.5,
        -0.5,0.5,-0.5,
       ]
       */
      const vertices = new Float32Array([
        // 前面四个点
        -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5,
        // 后面四个点
        -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, -0.5,
        // 上面四个点
        -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
        // 下面四个点
        -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5,
        // 右面四个点
        0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, 0.5,
        // 左面四个点
        -0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5,
      ]);
      const buffer = gl.createBuffer();

      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      const aPositionIndex = gl.getAttribLocation(program, "aPosition");
      gl.vertexAttribPointer(
        aPositionIndex,
        3,
        gl.FLOAT,
        false,
        3 * Float32Array.BYTES_PER_ELEMENT,
        0,
      );
      gl.enableVertexAttribArray(aPositionIndex);

      // 传递矩阵变换角度参数
      const uRadianIndex = gl.getUniformLocation(program, "uRadian");
      const uRadian = 10.0;
      gl.uniform1f(uRadianIndex, uRadian);

      const indices = new Uint16Array([
        0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18,
        16, 18, 19, 20, 21, 22, 20, 22, 23,
      ]);
      const indexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

      const faceColors = [
        [1.0, 0.0, 0.0, 1.0], // 前面颜色
        [0.0, 1.0, 0.0, 1.0], // 后面颜色
        [0.0, 0.0, 1.0, 1.0], // 上面颜色
        [1.0, 1.0, 0.0, 1.0], // 下面颜色
        [1.0, 0.0, 1.0, 1.0], // 右面颜色
        [0.0, 1.0, 1.0, 1.0], // 左面颜色
      ];

      //
      const uColorIndex = gl.getUniformLocation(program, "uColor");
      // 开启深度测试，不然前面一个面会隐藏
      gl.enable(gl.DEPTH_TEST);

      for (let i = 0; i < 6; i++) {
        // 传递每个面的颜色参数
        gl.uniform4fv(uColorIndex, faceColors[i]);
        // 依次绘制立方体的每个面
        gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, i * 6 * Uint16Array.BYTES_PER_ELEMENT);
      }
    </script>
  </body>
</html>
